<template>
	<view class="answer acea-row row-middle row-column">
<!-- 		<view class="top-title">
			健康信息问卷
		</view>
		<view class="banner"></view>
		<form @submit="formSubmit">
			<view class="acea-row row-middle">
				<view class="color333 fs-40 bold">姓名：</view>
				<view>
					<input :value="name" class="input" type="text" placeholder="请填写姓名" placeholder-class="color888"/>
				</view>
			</view>
			<view class="acea-row row-middle mt30">
				<view class="color333 fs-40 bold">性别：</view>
				<view class="input">
					<picker :range="array" :value="index" @change="sexchange">
						<view>{{array[index]}}</view>
					</picker>
				</view>
			</view>
			<view class="acea-row row-middle mt30">
				<view class="color333 fs-40 bold">年龄：</view>
				<view>
					<input :value="name" class="input" type="text" placeholder="请填写年龄" placeholder-class="color888"/>
				</view>
			</view>
			
			<button class="btn" form-type="submit">点击答题</button>
			<navigator  class="history" url="/pages/answer/bill" hover-class="none">答题记录</navigator>
		</form> -->
		
		<view class="top-bg acea-row row-center-wrapper">
			<image src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/answer-icon.png" mode="aspectFit"></image>
		</view>
		
		<view @click="bill" class="button" style="background-image: url('https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/answer001.png');"></view>

		<view @click="dati" class="button" style="background-image: url('https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/answer002.png');"></view>
		
		<suspension></suspension>
	</view>
</template>

<script>
	import suspension from '@/components/suspension.vue';
	export default {
		components:{
			suspension
		},
		data() {
			return {
				array: ['男', '女', '其他','请选择性别'],
				name:'',
				index:3,
				
			};
		},
		methods:{
			bill(){
				uni.navigateTo({
					url: '/pages/answer/bill'
				})
			},
			dati(){
				this.$util.Tips({ title : '功能开发中...' })
				// uni.navigateTo({
				// 	url: '/pages/answer/topic'
				// })
			},
			formSubmit(){
				uni.navigateTo({
					url: '/pages/answer/topic'
				})
			},
			sexchange(e){
				this.index = e.detail.value;
			}
		}
	}
</script>

<style lang="scss">
	.answer{
		
		.top-bg{
			background: linear-gradient(180deg, #BBD3FB 25%, #FCFDFF 55%, #F5F5F5 100%);
			width: 100%;
			height: 700rpx;
			
			image{
				width: 580rpx;
				height: 560rpx;
			}
		}
		
		.button{
			width: 750rpx;
			height: 290rpx;
			background-size: 100% 100%;
		}
		
		
		.top-title{
			width: 418rpx;
			height: 120rpx;
			background-image: url('https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/answer01.png');
			background-size: 100% 100%;
			color: #FD7D36;
			font-size: 40rpx;
			text-align: center;
			line-height: 120rpx;
			margin-top: 50rpx;
		}
		
		.banner{
			width: 344rpx;
			height: 344rpx;
			background-size: 100% 100%;
			background-image: url('https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/answer02.png');
			margin-bottom: 50rpx;
		}
		
		.input{
			width: 520rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-bottom: 3rpx solid #888888;
			padding-left: 30rpx;
		}
		
		.btn{
			width: 688rpx;
			height: 104rpx;
			background: #FD7D36;
			box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
			border-radius: 52rpx;
			color: #ffffff;
			text-align: center;
			line-height: 104rpx;
			font-size: 36rpx;
			margin-top: 150rpx;
		}
		.history{
			width: 688rpx;
			height: 104rpx;
			background: #FFFFFF;
			box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
			border-radius: 52rpx;
			color: #666666;
			text-align: center;
			line-height: 104rpx;
			font-size: 36rpx;
			margin-top: 50rpx;
		}
		
		
	}
</style>
